import React from 'react'
import { Select,Input,Button,Radio } from 'antd';
import styles from '../../css/categoryAdd.module.scss'
const Option = Select.Option;
const RadioGroup = Radio.Group;




export default class CategoryEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

            id: "",
            name: "",
            label: "",
            parentId: "",
            isShow: "",
            orderBy: "",
            isLeaf: "",
            parentName: "",
            parents:[]
        }
    }

    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            isShow: e.target.value,
        });
    }
    render() {
        return <div className={styles.container}>
            <div className={styles.handleBox}>
                <div>
                    父节点：&nbsp;&nbsp;&nbsp;<Select id='se' defaultValue='0' className={styles.selectBox}
                                             value={this.state.parentId}     onChange={this.handleTxt}>
                    <Option key="0" value="0" >根节点</Option>
                    {this.state.parents.map(item => {
                        return <Option key={item.id} title={item.name} value={item.id} >{item.name}</Option>
                    })}

                </Select>
                </div>
                <div>
                    分类名称：<Input placeholder="请输入分类名称" value={this.state.name} onChange={this.handleText}
                                allowClear={true} className={styles.inputBox}/>
                </div>
                <div className={styles.radioBox}>
                    是否显示：&nbsp;&nbsp;<RadioGroup onChange={this.onChange} value={this.state.isShow}>
                    <Radio  value={'1'}>是</Radio>
                    <Radio value={'0'}>否</Radio>
                </RadioGroup>
                </div>
                <Button type="primary" onClick={this.sureClick} style={{marginLeft:"20px"}}>新增</Button>
                <Button type="primary" onClick={this.cancelClick} style={{marginLeft:"20px"}}>取消</Button>
            </div>
        </div>
    }

    componentWillMount() {
     var id=this.props.match.params.id;
        this.goDetail(id);
        this.getParent();

    }
    handleText = (e) => {    //由于react是单向绑定。所以需要通过 onChange方法，手动设置。页面数据改变则逻辑数据改变
        this.setState({
            name:e.target.value
        }, function () {
            console.log(this.state.name)
        })

    }
    handleTxt = (value) => {
        this.setState({
            value:value,
            parentId:value
        });
    }
    cancelClick=()=>{
        this.props.history.go(-1)
    }
    sureClick = () => {
        let self = this;
        fetch('/category', {
            method: 'PUT',
            body: JSON.stringify({
                id: this.state.id,
                name: this.state.name,
                label: this.state.label,
                parentId: this.state.parentId,
                isShow: this.state.isShow,
                orderBy: this.state.orderBy,
                isLeaf: this.state.isLeaf,
                parentName: this.state.parentName,
            }),
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())  //返回一个promise对象，可以解析成json对象
            .then(data => {
                this.props.history.push('/categoryTable')  //跳转到分类列表去
            })
    }
    getParent = () => {
        let self = this;
        fetch('/category/all', {
            method: 'POST',
            body: JSON.stringify({
                parentId: 0
            }),
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())  //返回一个promise对象，可以解析成json对象
            .then(data => {
                self.setState({
                    parents: data.data,
                })
            })
    }
    goDetail=(id)=>{
        let self = this;
        fetch('/category/'+id)
            .then(response=>response.json())
            .then(data=>{
                this.setState({
                    id:data.data.id,
                    name:data.data.name,
                    label: data.data.label,
                    parentId: data.data.parentId,
                    isShow: data.data.isShow,
                    orderBy: data.data.orderBy,
                    isLeaf: data.data.isLeaf,
                    parentName: data.data.parentName,

                })
            })
    }


}





